<template>
  <div>
  <mheader></mheader>
  <div class="collegeMenu">
    <div class="collegeMain">
      <div class="collegeTop">
        <el-row class="collegeBread"><b>当前位置：</b>MBA学位搜索结果</el-row>
        <el-row class="collegeSelect">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item>
              <el-select v-model="form.college" placeholder="请选择院校" size="small" class="formSelect" @change="collegeChange">
                <el-option :label="i.name" :value="i.id" v-for="i in collegeList" :key='i.id'></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="form.secience" placeholder="请选择学位" size="small" class="formSelect" @change="secienceChange">
                <el-option label="请选择学位" value=""></el-option>
                <el-option :label="i.name" :value="i.id" v-for="i in secienceList" :key='i.id'></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="form.class" placeholder="请选择班型" size="small" class="formSelect">
                <el-option label="请选择班型" value=""></el-option>
                <el-option :label="i.name" :value="i.id" v-for="i in classList" :key='i.id'></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" class="formSubmit" @click="search">确认</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row class="collegeDownTop">
          <h3 class="collegeTitle">{{ schoolName1 }}</h3>
          <h2 class="SecienceClassName">{{ degree.name }}</h2>
          <a :href="schoolobj.introducePics" class="collegeDownload" v-if="schoolobj.introducePics!=null && schoolobj.introducePics!=''">{{ schoolobj.introduceText }}<img src="../assets/images/download.png"></a>
          <!-- <a href="http://140.143.63.54/mba/index.html#/" class="SecienceClassBtn">立即报名该学位</a> -->
          <router-link to="/stuEnroll">
            <!-- <a href="http://140.143.63.54/mba/index.html#/"> -->
              <p class="SecienceClassBtn">立即报名该学位</p>
            <!-- </a> -->
            </router-link>
          <div class="SecienceClassCard">
            <h3>基本信息</h3>
            <div class="SecienceClassCardDes">
              <div class="SecienceClassCardDesFlex" v-if="degree.deadlineDateA">
                <div class="SecienceClassCardTitle">
                  最近一期报名截止时间：
                </div>
                <div class="SecienceClassCardText">
                  {{ degree.deadlineDateA }}
                </div>
              </div>
              <div class="SecienceClassCardDesFlex" v-if="degree.enrollDateA">
                <div class="SecienceClassCardTitle">
                  最近一期入学时间：
                </div>
                <div class="SecienceClassCardText">
                  {{ degree.enrollDateA }}
                </div>
              </div>
            </div>
            <div class="SecienceClassCardDes">
              <div class="SecienceClassCardTitle">
                提交必须材料清单：
              </div>
              <div class="SecienceClassCardText">
                <p>以下材料请提供原件扫描件或者复印件扫描件：</p>
                <p v-html="degree.necessaryData"></p>
              </div>
            </div>
          </div>
        </el-row>
      </div>
    </div>
    <div class="SecienceReviewMenu" v-if="t">
      <div class="SecienceReviewMain">
        <h3 class="SecienceReviewMainTitle">学位报名基本条件</h3>
        <div class="SecienceReviewMainDesA">
          <el-row class="SecienceReviewMainLi" :gutter="20">
            <el-col :span="8" v-if="t.educationLimitValue && t.educationLimitType!=1" class="SecienceReviewSingle">
              <span>学历：</span>
              <b>{{ t.educationLimitType==3?rules.educationLimitValue[t.educationLimitValue]+'起':'指定'+rules.educationLimitValue[t.educationLimitValue] }}</b>
            </el-col>
            <el-col :span="8" v-if="t.schoolLimitValue && t.schoolLimitType!=1" class="SecienceReviewSingle">
              <span>院校类型条件：</span>
              <b>{{ t.schoolLimitType==3?rules.schoolLimitValue[t.schoolLimitValue]+'起':'指定'+rules.schoolLimitValue[t.schoolLimitValue] }}</b>
            </el-col>
            <el-col :span="8" v-if="t.studyFormLimitValue && t.studyFormLimitType!=1" class="SecienceReviewSingle">
              <span>学习形式条件：</span>
              <b>{{ t.studyFormLimitType==3?rules.studyFormLimitValue[t.studyFormLimitValue]+'起':'指定'+rules.studyFormLimitValue[t.studyFormLimitValue] }}</b>
            </el-col>
            <el-col :span="8" v-if="t.professionLimitValue && t.professionLimitType!=1" class="SecienceReviewSingle">
              <span>专业条件：</span>
              <b>{{ t.professionLimitValue }}</b>
            </el-col>
            <el-col :span="8" v-if="t.studyYearLimitValue && t.studyYearLimitType!=1" class="SecienceReviewSingle">
              <span>学习年限条件：</span>
              <b>{{ t.studyYearLimitType==3?rules.studyYearLimitValue[t.studyYearLimitValue]+'起':'指定'+rules.studyYearLimitValue[t.studyYearLimitValue] }}</b>
            </el-col>
            <el-col :span="8" v-if="t.fullEducationLimitType!=1" class="SecienceReviewSingle">
              <span>全日制条件：</span>
              <b>{{ rules.fullEducationLimitType[t.fullEducationLimitType] }}</b>
            </el-col>
            <el-col :span="8" v-if="t.subjectLimitValue && t.subjectLimitType!=1" class="SecienceReviewSingle">
              <span>科目数量条件：</span>
              <b>{{ t.subjectLimitType==3?rules.subjectLimitValue[t.subjectLimitValue]+'起':'指定'+rules.subjectLimitValue[t.subjectLimitValue] }}</b>
            </el-col>
            <el-col :span="8" v-if="t.averageGradeLimitValue && t.averageGradeLimitType!=1" class="SecienceReviewSingle">
              <span>成绩平均值：</span>
              <b>{{ t.averageGradeLimitValue + '起' }}</b>
            </el-col>
            <el-col :span="8" v-if="t.graduateCertLimitType!=1" class="SecienceReviewSingle">
              <span>毕业证：</span>
              <b>{{ rules.graduateCertLimitType[t.graduateCertLimitType] }}</b>
            </el-col>
            <el-col :span="8" v-if="t.degreeCertLimitType!=1" class="SecienceReviewSingle">
              <span>学位证：</span>
              <b>{{ rules.degreeCertLimitType[t.degreeCertLimitType] }}</b>
            </el-col>
            <el-col :span="8" v-if="t.certWebsitLimitType!=1" class="SecienceReviewSingle">
              <span>学信网：</span>
              <b>{{ rules.certWebsitLimitType[t.certWebsitLimitType] }}</b>
            </el-col>
            <el-col :span="8" v-if="t.gpaGradeLimitValue && t.gpaGradeLimitType!=1" class="SecienceReviewSingle">
              <span>GPA分值：</span>
              <b>{{ t.gpaGradeLimitValue + '起' }}</b>
            </el-col>
            <el-col :span="8" v-if="t.totalWorkYearLimitValue && t.totalWorkYearLimitType!=1" class="SecienceReviewSingle">
              <span>总工作年限：</span>
              <b>{{ t.totalWorkYearLimitType==3?t.totalWorkYearLimitValue+'年起':'指定'+t.totalWorkYearLimitValue+'年' }}</b>
            </el-col>
            <el-col :span="8" v-if="t.lastWorkYearLimitValue && t.lastWorkYearLimitType!=1" class="SecienceReviewSingle">
              <span>最后一份工作年限：</span>
              <b>{{ t.lastWorkYearLimitType==3?t.lastWorkYearLimitValue+'年起':'指定'+t.lastWorkYearLimitValue+'年' }}</b>
            </el-col>
            <el-col :span="8" v-if="t.salaryLimitValue && t.salaryLimitType!=1" class="SecienceReviewSingle">
              <span>年薪限制条件：</span>
              <b>{{ t.salaryLimitType==3?t.salaryLimitValue+'万起':'指定'+t.salaryLimitValue+'万' }}</b>
            </el-col>
            <el-col :span="24" v-if="t.studyCondExpandLimitValue && t.studyCondExpandLimitType!=1" class="SecienceReviewSingle">
              <span>其他学习条件：</span>
              <b>{{ t.studyCondExpandLimitValue }}</b>
            </el-col>
            <el-col :span="24" v-if="t.workCondExpandValue && t.workCondExpandLimit!=1" class="SecienceReviewSingle">
              <span>其他工作条件：</span>
              <b>{{ t.workCondExpandValue }}</b>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="SecienceMoneyMenu">
      <div class="SecienceMoneyMain">
        <h3>学位报名相关费用</h3>
        <div class="SecienceMoneyMainDes">
          <div class="SecienceMoneyMainDesL">
            <h5 class="SecienceMoneyMainDesH3">申请费</h5>
            <p>申请费用：￥{{ degree.applyMoneyStr }}</p>
            <p>费用包含：<br />取得入学资格前的一切材料认定/资格审核/翻译件制作和美化</p>
          </div>
          <div class="SecienceMoneyMainDesLine"></div>
          <div class="SecienceMoneyMainDesR">
            <h5 class="SecienceMoneyMainDesH3">学费</h5>
            <p>总额：￥{{ degree.totalMoneyStr }}</p>
            <p>一期：￥{{ degree.firstTermMoneyStr }}</p>
            <p>二期：￥{{ degree.secondTermMoneyStr }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="classListMenu" v-if="degree.degreeClassList && degree.degreeClassList.length>0">
      <div class="classListMain">
        <h3 class="classListMainTitle">学位班型</h3>
        <el-table
          :data="degree.degreeClassList"
          header-cell-class-name="classTableHeader"
          style="width: 100%"
          class="classTable">
          <el-table-column
            prop="name"
            label="班级名称"
            class-name="classTableName">
          </el-table-column>
          <el-table-column
            label="奖学金"
            class-name="classTablescholarship">
            <template slot-scope="scope">
              ￥{{ scope.row.rewardStr }}
            </template>
          </el-table-column>
          <el-table-column
            label="报名截止日"
            class-name="classTableName">
            <template slot-scope="scope">
              {{ scope.row.enrollDeadLine?scope.row.enrollDeadLine:'--' }}
            </template>
          </el-table-column>
          <el-table-column
            label="助学金"
            class-name="classTableName">
            <template slot-scope="scope">
              {{ scope.row.financialValue?'￥' + scope.row.financialValue:'--' }}
            </template>
          </el-table-column>
          <el-table-column
            label="优惠截止日"
            class-name="classTableName">
            <template slot-scope="scope">
              {{ scope.row.endDate ? scope.row.endDate : '--' }}
            </template>
          </el-table-column>
          <el-table-column
            width="250">
            <template slot-scope="scope">
              <el-button size="small" class="seeItem" @click="seeItem(scope.row)">查看详情</el-button>
              <el-button size="small" class="toApply" @click="apply">立即申请</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="SecienceMethodMenu">
      <div class="SecienceMethodMain">
        <h3 class="SecienceMethodMainTitle">金融解决方案</h3>
        <div class="SecienceMethodMainContent">
            <div class="SecienceMethodMainContentW" :class="jrA?'':'grey'">
              <h3>咖啡易融</h3>
              <div class="SecienceMethodMainContentP">
                <p>最低贷款额度￥2000</p>
                <p>最高贷款额度2万</p>
              </div>
              <div class="SecienceMethodMainContentP">
                <p>可分期数：3，6，9，12</p>
              </div>
              <div class="SecienceMethodMainContentP">
                <p>状态：{{ jrA?'已配置':'未配置' }}</p>
              </div>
            </div>
            <div class="SecienceMethodMainContentW" :class="jrB?'':'grey'">
              <h3>融360</h3>
              <div class="SecienceMethodMainContentP">
                <p>最低贷款额度￥2000</p>
                <p>最高贷款额度5万</p>
              </div>
              <div class="SecienceMethodMainContentP">
                <p>可分期数：6，12</p>
              </div>
              <div class="SecienceMethodMainContentP">
                <p>状态：{{ jrB?'已配置':'未配置' }}</p>
              </div>
            </div>
            <div class="SecienceMethodMainContentW" :class="jrC?'':'grey'">
              <h3>百度</h3>
              <div class="SecienceMethodMainContentP">
                <p>最低贷款额度￥2000</p>
                <p>最高贷款额度5万</p>
              </div>
              <div class="SecienceMethodMainContentP">
                <p>可分期数：3，6，12</p>
              </div>
              <div class="SecienceMethodMainContentP">
                <p>状态：{{ jrC?'已配置':'未配置' }}</p>
              </div>
            </div>
        </div>
      </div>
    </div>
    <div class="collegeMoreMenu" v-if="otherDegree.length>0">
      <div class="collegeMorelist">
        <h3 class="collegeMoreTitle">该院校更多学位</h3>
        <el-row class="collegeMoreUl" :gutter="20">
          <el-col :span="8" v-for="i in otherDegree" :key="i.name">
            <div class="collegeMoreLi" @click="changeDegree(i)">
              <p>{{ i.name }}</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
  <!-- <mfooter></mfooter> -->
  </div>
</template>

<script>
import mheader from '@/components/mheader'
// import mfooter from '@/components/mfooter'
import {
  getDegreeResult
} from '@/api'
import {
  rules
} from '@/util'
export default {
  name: 'college',
  components: {
    mheader
    // mfooter
  },
  data () {
    return {
      form: {
        college: '',
        secience: '',
        class: ''
      },
      collegeList: [],
      secienceList: [],
      classList: [],
      schoolName: '',
      schoolName1: '',
      degree: '',
      schoolobj: '',
      t: '',
      rules: rules,
      otherSchools: [],
      lendingInstitutions: '',
      jrA: false,
      jrB: false,
      jrC: false,
      otherDegree: ''
    }
  },
  created () {
    // window.scrollTo(0, 0)
    this.schoolName1 = sessionStorage.schoolName
    this.collegeList = JSON.parse(sessionStorage.collegeList)
    this.schoolobj = JSON.parse(sessionStorage.schoolobj)
    this.form.college = Number(this.$route.params.schoolId)
    this.form.secience = Number(this.$route.params.degreeId)
    for (let i = 0; i < this.collegeList.length; i++) {
      if (this.collegeList[i].id === this.form.college) {
        this.schoolName = this.collegeList[i].name
        this.secienceList = this.collegeList[i].degreeResultVoList
      }
    }
    for (let i = 0; i < this.secienceList.length; i++) {
      if (this.secienceList[i].id === this.form.secience) {
        this.classList = this.secienceList[i].classTypeResultVoList
      }
    }
    this.load()
  },
  methods: {
    load () {
      let params = {
        schoolId: this.form.college,
        degreeId: this.form.secience
      }
      getDegreeResult(params).then(res => {
        this.degree = res.data.degreeMap
        this.t = res.data.degreeMap.degreeCondition
        this.otherDegree = res.data.degreeMap.otherDegreeList
        this.lendingInstitutions = res.data.degreeMap.lendingInstitutions.split(',')
        if (this.lendingInstitutions.length > 0) {
          for (let i = 0; i < this.lendingInstitutions.length; i++) {
            if (this.lendingInstitutions[i] === '1') {
              this.jrA = true
            } else if (this.lendingInstitutions[i] === '2') {
              this.jrB = true
            } else if (this.lendingInstitutions[i] === '3') {
              this.jrC = true
            }
          }
        }
      })
    },
    collegeChange () {
      this.form.secience = ''
      for (let i = 0; i < this.collegeList.length; i++) {
        if (this.collegeList[i].id === this.form.college) {
          this.schoolName = this.collegeList[i].name
          this.secienceList = this.collegeList[i].degreeResultVoList
        }
      }
    },
    secienceChange () {
      this.form.class = ''
      for (let i = 0; i < this.secienceList.length; i++) {
        if (this.secienceList[i].id === this.form.secience) {
          this.classList = this.secienceList[i].classTypeResultVoList
        }
      }
    },
    search () {
      if (this.form.college === '') {
        this.$message.error('请选择院校名称')
      } else {
        this.jrA = false
        this.jrB = false
        this.jrC = false
        sessionStorage.schoolName = this.schoolName
        sessionStorage.collegeId = this.form.college
        if (this.form.college !== '' && this.form.secience === '' && this.form.class === '') { // 只调院校
          this.$router.push({
            path: '/college'
          })
        } else if (this.form.college !== '' && this.form.secience !== '' && this.form.class === '') { // 只调学位
          this.load()
        } else if (this.form.college !== '' && this.form.secience !== '' && this.form.class !== '') { // 只调学位
          this.$router.push({
            path: '/class/' + this.form.college + '/' + this.form.secience + '/' + this.form.class
          })
        }
      }
    },
    changeDegree (row) {
      this.form.secience = row.id
      this.load()
      // window.scrollTo(0, 0)
    },
    seeItem (row) {
      this.$router.push({
        path: '/class/' + this.form.college + '/' + this.form.secience + '/' + row.id
      })
    },
    apply () {
      // location.href = 'http://140.143.63.54/mba/index.html#/'
      this.$router.push('/stuEnroll')
    }
  },
  filters: {
    rule (v) {
      if (v === null || v === '') {
        return '--'
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import url('../style/base');
.collegeMenu {
    width: 100%;
    overflow: hidden;
    .collegeMain {
        width: 905px;
        margin: 0 auto;
        .collegeTop {
            width: 100%;
            background: #fff;
        }
        .collegeBread {
            margin-top: 19px;
            b {
                font-weight: bold;
            }
        }
        .collegeSelect {
            margin-top: 49px;
        }
        .formSelect {
            width: 235px;
            margin-right: 10px;
        }
        .formSubmit {
            width: 106px;
            background: #A51C30;
            border-color: #A51C30;
        }
        .formSubmit:hover {
            opacity: 0.7;
        }
        .collegeDownTop {
            position: relative;
            min-height: 100px;
        }
        .collegeTitle {
            margin-top: 37px;
            font-size: 20px;
            font-family: 'STSongti-SC-Black';
        }
        .collegeDownload {
            font-size: 16px;
            color: #D96873;
            position: absolute;
            right: 0;
            top: 44px;
            vertical-align: middle;
            img {
                width: 23px;
                height: 23px;
                vertical-align: middle;
                margin-left: 10px;
            }
        }
    }
    .collegeMoreMenu {
        width: 100%;
        overflow: hidden;
        background: rgba(164, 140, 144, .08);
        padding-top: 56px;
        .collegeMorelist {
            width: 905px;
            margin: 0 auto 98px;
            .collegeMoreTitle {
                font-size: 20px;
                font-family: 'STSongti-SC-Black';
            }
            .collegeMoreUl {
                width: 100%;
                overflow: hidden;
                margin-top: 26px;
            }
            .collegeMoreLi {
                width: 290px;
                height: 290px;
                background-size: cover !important;
                margin-top: 10px;
                text-align: center;
                // line-height: 290px;
                color: #fff;
                font-size: 24px;
                cursor: pointer;
                transition: 0.5s;
                background: grey;
                line-height: 34px;
                box-sizing: border-box;
                padding: 0 30px;
                .displayCenter;
            }
            .collegeMoreLi:hover {
                opacity: 0.8;
            }
            .collegeMoreLine {
                width: 100%;
                margin-top: 120px;
                overflow: hidden;
            }
        }
    }
    .SecienceDes {
        margin-top: 14px;
        font-size: 16px;
    }
    .SecienceClassName {
        margin-top: 44px;
        font-size: 20px;
        font-weight: bold;
    }
    .SecienceClassDes {
        margin: 50px 0 28px 10px;
        font-size: 20px;
        font-weight: bold;
    }
    .SecienceClassCard {
        width: 864px;
        box-shadow: 0 2px 10px 0 rgba(115, 130, 150, 0.1);
        overflow: hidden;
        margin: 28px auto 56px;
        padding: 17px;
        border-radius: 4px;
        h3 {
            font-size: 20px;
            font-weight: bold;
            margin-top: 4px;
        }
        .SecienceClassCardDes {
            margin-top: 28px;
            font-size: 14px;
            width: 100%;
            .SecienceClassCardDesFlex {
              display: flex;
              margin-top: 5px;
            }
            .SecienceClassCardTitle {
                width: 170px;
                line-height: 20px;
            }
            .SecienceClassCardText {
                flex-grow: 1;
                line-height: 20px;
                p {
                    line-height: 20px;
                    margin-bottom: 7px;
                }
            }
        }
    }
    .collegeMbaApply {
        margin: 13px auto 73px;
        width: 403px;
        height: 82px;
        line-height: 82px;
        border-radius: 4px;
        background: #A51C30;
        text-align: center;
        color: #fff;
        font-size: 36px;
        font-family: 'STSongti-SC-Black';
        display: block;
    }
    .collegeMbaApply:hover {
        opacity: 0.8;
    }
    .SecienceClassBtn {
        width: 206px;
        height: 41px;
        line-height: 41px;
        text-align: center;
        color: #fff;
        background: #970A18;
        border-radius: 4px;
        font-size: 18px;
        position: absolute;
        right: 0;
        top: 90px;
    }
    .SecienceClassBtn:hover {
        opacity: 0.7;
    }
    .SecienceReviewMenu {
        width: 100%;
        overflow: hidden;
        background: rgba(164, 140, 144, .08);
        .SecienceReviewMain {
            width: 900px;
            margin: 0 auto;
            .SecienceReviewMainTitle {
                font-size: 20px;
                font-family: 'STSongti-SC-Black';
                margin-top: 48px;
            }
            .SecienceReviewMainDesA {
                padding: 0 17px;
                background: #fff;
                box-shadow: 0 10px 10px 0 rgba(150, 115, 115, 0.12);
                margin: 26px 0 59px;
                position: relative;
                border-radius: 8px;
                .SecienceReviewMainDesAtit {
                    position: absolute;
                    top: -44px;
                    left: 0;
                    width: 230px;
                    height: 45px;
                    background: #fff;
                    box-shadow: 0 2px 4px 0 rgba(189, 186, 186, 0.5);
                    border-radius: 4px;
                    .SecienceReviewMainDesAtitL {
                        width: 6px;
                        height: 45px;
                        border-radius: 4px;
                        float: left;
                        background: #C9838C;
                        box-shadow: 0 2px 4px 0 rgba(189, 186, 186, 0.5);
                    }
                    .SecienceReviewMainDesAtitR {
                        padding-left: 18px;
                        line-height: 45px;
                        font-size: 18px;
                        color: #A41D2F;
                        font-weight: bold;
                    }
                }
                .SecienceReviewMainLi {
                    font-size: 14px;
                    padding: 20px;
                    line-height: 24px;
                    b {
                        font-weight: bold;
                    }
                    i {
                        font-weight: bold;
                        display: block;
                        line-height: 20px;
                        margin-top: 6px;
                    }
                }
            }
        }
    }
    .SecienceMoneyMenu {
        width: 100%;
        overflow: hidden;
        .SecienceMoneyMain {
            width: 905px;
            overflow: hidden;
            margin: 0 auto;
            h3 {
                font-size: 20px;
                font-family: 'STSongti-SC-Black';
                margin-top: 57px;
            }
        }
        .SecienceMoneyMainDes {
            width: 853px;
            box-shadow: 0 2px 10px 0 rgba(115, 130, 150, 0.1);
            overflow: hidden;
            padding: 24px 40px;
            position: relative;
            margin-top: 29px;
            margin-bottom: 89px;
            .SecienceMoneyMainDesL {
                width: 260px;
                float: left;
                color: #4A4A4A;
                .SecienceMoneyMainDesH3 {
                    font-size: 16px;
                    font-family: 'STSongti-SC-Black';
                    margin-bottom: 4px;
                }
                p {
                    margin-top: 10px;
                    font-size: 14px;
                    line-height: 20px;
                }
            }
            .SecienceMoneyMainDesR {
                width: 260px;
                float: right;
                color: #4A4A4A;
                .SecienceMoneyMainDesH3 {
                    font-size: 16px;
                    font-family: 'STSongti-SC-Black';
                    margin-bottom: 4px;
                }
                p {
                    margin-top: 10px;
                    font-size: 14px;
                    line-height: 20px;
                }
            }
            .SecienceMoneyMainDesLine {
                position: absolute;
                width: 2px;
                height: 82px;
                background: rgba(151, 151, 151, .13);
                left: 459px;
                top: 37px;
            }
        }
    }
    .SecienceMethodMenu {
        width: 100%;
        background: #fff;
        .SecienceMethodMain {
            width: 905px;
            margin: 0 auto;
            overflow: hidden;
            .SecienceMethodMainTitle {
                font-size: 20px;
                font-family: 'STSongti-SC-Black';
                margin-top: 46px;
                margin-bottom: 29px;
            }
            .SecienceMethodMainContent {
                width: 890px;
                margin: 0 auto 57px;
                padding-bottom: 20px;
                overflow: hidden;
            }
            .SecienceMethodMainContentW {
                width: 153px;
                height: 154px;
                box-shadow: 0 2px 10px 0 rgba(198, 165, 170, 0.36);
                border-radius: 4px;
                background: #fff;
                padding: 23px 35px;
                color: #4A4A4A;
                float: left;
                margin-right: 70px;
                transition: 0.5s;
                h3 {
                    font-size: 14px;
                    font-family: 'STSongti-SC-Black';
                }
                .SecienceMethodMainContentP {
                    margin-top: 14px;
                    font-size: 14px;
                    line-height: 20px;
                }
            }
            .SecienceMethodMainContentW:hover {
                background: #A41D2F;
                color: #FFFFFF;
            }
        }
    }
    .classListMenu {
        width: 100%;
        overflow: hidden;
        padding: 50px 0 62px;
        background: rgba(164, 140, 144, .08);
        .classListMain {
            width: 905px;
            margin: 0 auto;
            overflow: hidden;
            .classListMainTitle {
                font-size: 20px;
                font-family: 'STSongti-SC-Black';
            }
            .classTable {
                margin-top: 24px;
                .classTableName {
                    padding-left: 53px;
                }
                /deep/.el-table__header-wrapper thead th {
                    background: #A41D2F !important;
                    color: #ffffff !important;
                    font-size: 14px !important;
                }
                .classTablescholarship {
                    font-weight: bold;
                    font-size: 18px;
                    color: #A41D2F;
                }
                .seeItem {
                    background: #F6E2D0;
                    color: #BD6B77;
                    font-size: 16px;
                    width: 107px;
                    height: 32px;
                    line-height: 32px;
                    padding: 0;
                    text-align: center;
                    border: 0;
                }
                .toApply {
                    background: #A41D2F;
                    color: #ffffff;
                    font-size: 16px;
                    width: 107px;
                    height: 32px;
                    line-height: 32px;
                    padding: 0;
                    text-align: center;
                    border: 0;
                }
            }
        }
    }
    .SecienceReviewSingle {
        margin-bottom: 32px;
    }
    .SecienceReviewSingle:nth-last-child(1) {
        margin-bottom: 0;
    }
    .grey {
        background: #f1f1f1 !important;
    }
}
</style>
